<%@ Page Language="C#" MasterPageFile="~/master/admin.master" AutoEventWireup="true"
    CodeFile="default.aspx.cs" Inherits="admin_default" Title="Untitled Page" %>

<asp:Content ID="cntAdminHeaderContent" ContentPlaceHolderID="AdminHeaderContent"
    runat="Server">
   <link href="../javascript/datetime/jquery-ui.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="cntMiddleContent" ContentPlaceHolderID="cphMiddleContent" runat="Server">
  <script src="../thirdparty/highcharts/highcharts.js" type="text/javascript"></script>
  <script src="../javascript/datetime/jquery.ui.datepicker.js" type="text/javascript"></script>
  
    <script type="text/javascript">
        $(document).ready(function () {
            $("#txtDateFrom").datepicker();
            $("#txtDateTo").datepicker();
            Report1();
            Report2();
        });

        function Report1() {
            var store;
            $.ajax({
                type: "POST",
                url: "default.aspx/Report1",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    ChartReport1(eval(msg.d));

                },
                error: function () { }
            });
        }

        
        function ChartReport1(store) {
           
            var caption_array = new Array();
            var total_array = new Array();
            for (i = 0; i < store.length; i++) {
                
                caption_array[i] = store[i].SaleMonth;
                total_array[i] = parseInt(store[i].SaleQuantity);
            }

            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'report1',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Sales By Months',
                    x: -20 //center
                },
                
                xAxis: {
                    categories: caption_array
                },
                yAxis: {
                    title: {
                        text: 'Total Sales'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function () {
                        return 'Month: '+this.x + ', Total Sale ' + this.y + '';
                    }
                },
                legend: {
                    enabled: false
                },
                series: [{
                    name: '',
                    data: total_array
                }]
            });           
        }

        function Report2() {
            var store;
            $.ajax({
                type: "POST",
                url: "default.aspx/Report2",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    ChartReport2(eval(msg.d));

                },
                error: function () { }
            });
        }

        function ChartReport2(store) {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'report2',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Order Summary of this month'
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2)+' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        size: '75%',
                        dataLabels: {
                            enabled: false
                         }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Order Status',
                    data: store
                }]
            });
        }

        function Search() {
            if ($("#txtDateFrom").val() == "" || $("#txtDateTo").val()=="") 
            {
                alert("You must select dates");
            }
            else{
            Report3();
            Report4();
            }
        }

        function Report3() {
            var params = "{'fromDate': '" + $("#txtDateFrom").val() + "','toDate': '" + $("#txtDateTo").val() + "'}";
            var store;
            $.ajax({
                type: "POST",
                url: "default.aspx/Report3",
                data: params,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    ChartReport3(eval(msg.d));

                },
                error: function () { }
            });
        }

        function ChartReport3(store) {
            var caption_array = new Array();
            var total_array = new Array();
            for (i = 0; i < store.length; i++) {

                caption_array[i] = store[i].key;
                total_array[i] = parseInt(store[i].Val);
            }
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'report3',
                    type: 'column'
                },
                title: {
                    text: 'User Registration By Date'
                },
                
                xAxis: {
                    categories: caption_array
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total Registered'
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function () {
                        return '' +
					 'Total ' + this.y + ' user registered on ' + this.x;
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '',
                    data: total_array

                }]
            });
        }

        function Report4() {
            var params = "{'fromDate': '" + $("#txtDateFrom").val() + "','toDate': '" + $("#txtDateTo").val() + "'}";
            var store;
            $.ajax({
                type: "POST",
                url: "default.aspx/Report4",
                data: params,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    ChartReport4(eval(msg.d));

                },
                error: function () { }
            });
        }

        function ChartReport4(store) {
            var cat_array = new Array();
            var success_array = new Array();
            var fail_array = new Array();
            var manual_array = new Array();
            for (i = 0; i < store.length; i++) {

                cat_array[i] = store[i].DateSelected;
                success_array[i] = store[i].Success;
                fail_array[i] = store[i].Fail;
                manual_array[i] = store[i].Manual;
            }

            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'report4',
                    type: 'line',
                    marginRight: 0,
                    marginBottom: 25
                },
                title: {
                    text: 'Order Status by Dates',
                    x: -20 //center
                },              
                xAxis: {
                    categories: cat_array
                },
                yAxis: {
                    title: {
                        text: 'Total Count'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function () {
                        return  'Total ' + this.y + ' ' + this.series.name + ' order placed on ' + this.x;
                    }
                },
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: 'Success',
                    data: success_array
                }, {
                    name: 'Fail',
                    data: fail_array
                }, {
                    name: 'Manuual',
                    data: manual_array
                }]
            });
        }

    </script>
    <div id="report1" class="grid_12">
    </div>
    <div id="report2" class="grid_10">
    &nbsp;
    </div>
    <div  class="grid_24">
    <fieldset>
    <legend>Search</legend>
    From Date: <input id="txtDateFrom" type="text" /> &nbsp; To Date: <input id="txtDateTo" type="text" /> &nbsp;<input
        id="btnSearch" type="button" value="Search" onclick="javascript:Search();"  class="button medium green"/>
    </fieldset>
    
    </div>
    <div  class="grid_24">
      <div id="report3" class="grid_12 alpha">
    </div>
    <div id="report4" class="grid_12 omega">
    
    </div>
    </div>
</asp:Content>
